<template>
    <div>
        <!-- 搜索框 -->
        <searchVue :loadData="loadData" :page="page" :pageSize="pageSize" />
        <!-- 按钮 -->
        <btnVue @exposeSystem="exposeSystem" @importSystem="importSystem" :isChildButtonDisabled="isChildButtonDisabled" />
        <!-- 表格 -->
        <div class="gap"></div>
        <el-card class="box-card">
            <template #header>
                <el-button type="primary" size="default" @click="systemMange('systemMange')">权限管理</el-button>
                <el-button type="primary" size="default" @click="systemSet('systemSet')">权限设置</el-button>
            </template>
            <tableVue :data="data" :total="total" :loadData="loadData" :page="page" :pageSize="pageSize"
                @onSelectPerData="onSelectPerData" @systemedit="systemedit" v-if="istablevue" />
            <setVue v-else />
        </el-card>
    </div>
    <div class="gap"></div>
    <div>
        <input ref="fileInputRef" type="file" style="display:none" @change="handleFileChange" />
    </div>
    <el-dialog v-model="syseditdialogVisible" :show-close="false" :close-on-click-modal="false">
        <template #header="{ close, titleId, titleClass }">
            <div class="my-header">
                <span :id="titleId" :class="titleClass">新增客户</span>
                <el-icon @click="close" class="closestylus">
                    <Close />
                </el-icon>
            </div>
        </template>
        <editVue :setDialogVisible="setDialogVisible" @colse-dialog-from="colseDialogFrom" :followId="followId" />
    </el-dialog>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
import { usePermissionList, userDialogVisible } from "./hooks";
import btnVue from "./ui/btn.vue";
import searchVue from "./ui/search.vue";
import tableVue from "./ui/table.vue";
import { exposeCustomerDate } from "@/utils/Tools/exposeData";
import { readExcel } from "@/utils/Tools/inportData";
import { provide, reactive, ref } from "vue";
import editVue from "./ui/edit.vue";
import setVue from "./ui/set.vue";
interface IProps {
    page: number
    pageSize: number
}
const props = withDefaults(defineProps<IProps>(), {
    page: 1,
    pageSize: 10
})
const route = useRoute()
const router = useRouter()
const [syseditdialogVisible, setDialogVisible] = userDialogVisible()
const [data, total, loadData] = usePermissionList(props.page, route.query as object, props.pageSize)

const colseDialogFrom = (value: boolean) => {
    setDialogVisible(value)
}
//编辑
const followId = ref(0)
const systemedit = (systemId: number, item: number) => {
    followId.value = systemId
    if (item === 10) {
        syseditdialogVisible.value = true
    }
}

const exportSystemTable = reactive<any>([])
const onSelectPerData = (selectedData: ISystemData.IPermission[]) => {
    selectedData.forEach(item => exportSystemTable.push(item))
    console.log(exportSystemTable)
}
const systemHeader = reactive<object>({
    'sysid': '序号',
    "systemname": "职位名称",
    "systemdepart": "关联部门",
    "systemlevel": "权限等级",
    "systemstate": "状态",
})

// 导出客户
const exposeSystem = (value: boolean) => {
    console.log(1111);

    exposeCustomerDate(value, exportSystemTable, systemHeader)
}
//导入数据
const fileInputRef = ref<HTMLInputElement | null>(null);
const tableData = ref<any>([]);
const importSystem = (value: boolean) => {
    if (value) {
        if (fileInputRef.value) {
            fileInputRef.value.click();
        }
    }
}
const handleFileChange = (event: Event) => {
    const target = event.target as HTMLInputElement;
    const file = target.files?.[0];
    if (file) {
        readExcel(file, tableData)
    }
};
const istablevue = ref(true)


let isChildButtonDisabled = ref(false);
const systemMange = (value: string) => {
    isChildButtonDisabled.value = false
tablevue(value)
}
const systemSet = (value: string) => {
    isChildButtonDisabled.value = true
    tablevue(value)

}
// 判断跳转的表格

const tablevue = (type: string) => {
    switch (type) {
        case 'systemMange':

            istablevue.value = true
            break;
        case 'systemSet':

            istablevue.value = false
            break;
        default:

            istablevue.value = false
            break;
    }
}
const emit = defineEmits(["sendSymolValue"])
</script>

<style lang="scss" scoped>
.gap {
    height: 10px;
    background-color: #f2f2f2;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 0;
}

.el-pagination {
    margin-top: 20px;
}

.pagination {
    width: 50%;
    margin: 0 auto;
}

.el-overlay {
    .el-overlay-dialog {


        .el-dialog {
            .el-dialog__body {
                .QRCode {
                    width: 100px;
                    height: 100px;
                    margin: auto;

                }
            }



            .el-dialog__header {
                width: 100%;
                margin: 0;
                padding: 0;
                height: 50px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background-color: red;

                .my-header {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    text-align: center;

                    span {
                        width: 100%;
                        text-align: center;
                    }

                    i {
                        margin-right: 10px;
                    }



                }
            }


        }
    }

}

.el-card {
    margin-bottom: 20px;


    .el-card__header {
        border-bottom: 0;
        padding: 0;
        margin-left: 10px;
        margin-top: 10px;

        .card-header {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .colorBar {
                width: 4px;
                height: 15px;
                background-color: #367eea;
                margin-right: 10px;
            }
        }


    }

}

.closestylus {
    cursor: pointer;
}
</style>